<template>
	<view class="container rent-container" :style="pagePadding">
		<view class="rent-title" :style="getTopStyle()">
			农场土地列表
		</view>
		<view class="page-panel">
			<view class="page-list" v-for="item in pageList" :key="item.landId">
				<image class="data-bg" :src="$resFileUrl+item.rentLandImg" mode="aspectFill"></image>
				<view class="data-content">
					<view class="list-title">{{item.rentLandName}}</view>
					<view class="list-info">{{item.rentLandDesc}}</view>
					<view class="list-bottom">
						<view class="list-price"></view>
						<!-- <view class="list-price-title">价格：</view>
						<view class="list-price-unit c-danger">￥</view>
						<view class="list-price c-danger">100元</view> -->
						<view class="yuan-btn btn-success" @click="jump('/pages/rent/detail?id='+item.rentLandId)">选择土地</view>
					</view>

				</view>
			</view>
		</view>
		<view class="not-more" v-if="isLoading">加载中...</view>
		<view class="null-page" v-else-if="pageList.length<=0 ">
			<text class="iconfont">&#xe642;</text>
			<view class="null-page-tips">暂无数据~</view>
		</view>
		<view class="not-more" v-else-if="notMore">没有更多土地了...</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref, getCurrentInstance } from 'vue';
	import api from '@/common/api';
	import { hideLoading, showLoading } from '@/common/util';
	import { onShow, onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
	const pagePadding = ref('')
	const isLoading = ref(false)
	const pageList = ref<any[]>([])
	const notMore = ref(true)

	const appInstance = getCurrentInstance().proxy
	onMounted(async () => {
		const query = uni.createSelectorQuery().in(appInstance);
		query
			.select(".rent-title")
			.boundingClientRect((data : any) => {
				pagePadding.value = `padding-top:${data.height + 15}px`
			})
			.exec();

		getPageList()
	})

	const pageSize = 10
	const pageNum = ref(1)
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const res = await api.getLandList({
				pageNum: pageNum.value,
				pageSize
			})
			if (res.rows.length < pageSize) notMore.value = true
			pageList.value = pageList.value.concat(res.rows)
		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum.value = pageNum.value + 1
		getPageList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum.value = 1
		pageList.value = []
		getPageList()
	}
	onReachBottom(() => {
		loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
	})
	const getTopStyle = () => {
		// #ifdef MP-WEIXIN
		const res = uni.getMenuButtonBoundingClientRect()
		return `padding-top:${res.top + 10}px`
		// #endif
		// #ifdef H5
		return `padding-top:20px`
		// #endif
	}
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
</script>

<style lang="scss">
	.rent-container {
		padding-bottom: 120rpx;

		.rent-title {
			background-color: #17CC77;
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			padding-bottom: 30rpx;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 99;
		}

		.page-panel {
			padding: 0 20rpx;
			width: 100%;
		}

		.page-list {
			width: 100%;
			background-color: #fff;
			padding-bottom: 30rpx;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 8rpx 10rpx 0 rgba(0, 0, 0, 0.1);
		}

		.data-content {
			padding: 0 25rpx;
			margin-top: 20rpx;
		}

		.data-bg {
			width: 100%;
			height: 380rpx;
			display: block;
			border-radius: 16rpx 16rpx 0 0;
		}

		.list-title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.list-info {
			font-size: 30rpx;
			color: #8F8F8F;
			margin-top: 10rpx;
		}

		.list-bottom {
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			font-size: 30rpx;

			.yuan-btn {
				width: 170rpx;
				height: 60rpx;
				border-radius: 60rpx;
				background-color: #17CC77;
			}
		}

		.list-price-title {
			color: #8F8F8F;
		}

		.list-price-unit {
			font-size: 24rpx;
		}

		.list-price {
			flex-grow: 1;
		}
	}
</style>